<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-15 22:39:07
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-26 23:25:51
 * @FilePath: /chat-ai-plus/src/components/charts/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="chat-warp">
    <div class="tabs">
      <div class="tab-bar" :class="{'active': current === 'All'}" @click="handleClick('All')">{{$t('chats.types.all') }}</div>
      <div class="tab-bar" :class="{'active': current === 'Starred'}" @click="handleClick('Starred')">{{$t('chats.types.starred') }}</div>
    </div>

    <div class="tab-context">

      <view class="empty" v-if="chartList.length === 0">

       <view class="align-items_center justify_center py_lg">
         <u-image mode="aspectFit" width="100px" height="120px" src="/static/images/chat-empty@2x.png"></u-image>
       </view>
        <view class="h3  t_center">
          {{$t('chats.starred.empty.heading') }}
        </view>
        <view class="mt_xs t_center">
          {{$t('chats.starred.empty.subHeading') }}
        </view>
        <view class=" py_md justify_center">
          <u-button type="primary"  :text="$t('chats.starred.empty.btn')" shape="circle" size="small"></u-button>
        </view>
      </view>
      <div class="chat-list" v-if="chartList.length > 0">
        <div class="align-items_center justify_between chat gap_xs" v-for="item in chartList" :key="item.name" @click="handleChange(item.name)">
          <u-image
            width="40px"
            height="40px"
            :src="`/static/images/${item.icon}@2x.png`"
            shape="circle"
          ></u-image>
          <div class="flex">
            <div class="heading">{{item.title}}</div>
            <div class="color_light">{{item.description}}</div>
            <div class="align-items_center gap_sm mt_xs">
              <div class="tag">{{item.name}}</div>
              <div class="tag">11:22</div>
            </div>
          </div>
          <div>
            <!-- <u-icon name="star" color="#2979ff" size="28"></u-icon> -->
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { aiModels } from '@/model/index';
import useChatStore from '@/store/modules/chat';
import { navigateTo } from '@/utils/uni';
export default defineComponent({
  name: 'Charts',
  setup() {
    const chatStore = useChatStore();
    const chartList = ref([...aiModels]) 
    const current = ref('All')
    const handleClick = type => {
      chartList.value = type === 'All' ? [...aiModels] : []
      current.value = type
    };

    const handleChange = name => {
      chatStore.clearConversations();
      chatStore.setCurrentRoom();
      chatStore.toggleModel(name);
      navigateTo('app')
    };
    return {
      handleClick,
      chartList,
      current,
      handleChange
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.chat-warp {
  // background: #cccccc;
  // border-radius: $radius;

  .tabs {
    border-radius: $radius;
    background: $white-color;
    padding: map-get($spaces, xs);
    .tab-bar {
      cursor: pointer;
      display: inline-block;
      margin: 0 map-get($spaces, xs);
      padding: 0 map-get($spaces, sm);

      border-radius: $radius;

      line-height: 1.6;
    }
    .tab-bar.active {
      background: map-get($theme-colors, primary);
      color: $white-color;
    }
  }

  .tab-context {
    margin-top: $radius;
  }
}

.chat-list {
  .chat {
    // padding: map-get($spaces, sm);
    background: $white-color;
    padding: map-get($spaces, sm);
    border-radius: $radius;
  }
  .chat + .chat {
    margin-top: map-get($spaces, sm);
  }
}

.tag {
  background: #f7f7f7;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1.6;
  padding: 0 map-get($spaces, sm);
}
</style>

